<template>
  <edu-mescroll-uni
    @init="mescrollInit"
    @down="refresh"
    @up="getCourseList"
    :data-theme="globPrimary"
  >
    <view class="list">
      <view class="item" v-for="(item, index) in courseList" :key="index">
        <courseImage
          width="312"
          height="172"
          :image="item.course_cover"
          :courseType="item.course_type"
          :courseTypeText="item.course_type_text"
        ></courseImage>
        <view class="right">
          <view class="title u-line-2">{{ item.course_title }}</view>
          <view class="percent blue" v-if="item.finished_rate <= 0">{{
            toPercent(item.finished_rate)
          }}</view>
          <view class="percent" v-else>{{ toPercent(item.finished_rate) }}</view>
          <u-line-progress
            :active-color="globPrimaryColor"
            :percent="item.finished_rate"
            :height="8"
            :show-percent="false"
            inactive-color="#F1F1F1"
          ></u-line-progress>
        </view>
      </view>
    </view>
  </edu-mescroll-uni>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  props: {
    value: {
      type: Number,
    },
  },
  data() {
    return {
      courseList: [],
      status: 'all',
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    refresh() {
      this.mescroll.resetUpScroll()
    },
    // 页面数据
    getCourseList(page) {
      this.$edu.api
        .getCourseRecordCourse({
          course_type: this.value,
          learn_status: this.status,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          let total = data.total
          let list = data.data

          if (page.num == 1) this.courseList = []
          this.courseList = this.courseList.concat(list)
          this.mescroll.endBySize(list.length, total)
        })
    },
    changeScreening(val) {
      this.status = val
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
    // 进度条提示文字
    toPercent(percentage) {
      if (percentage <= 0) {
        return `开始学习`
      } else if (percentage >= 100) {
        return `已完成`
      } else {
        return `${percentage}%`
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  padding: 30rpx 30rpx 0;
  .item {
    display: flex;
    & + .item {
      margin-top: 32rpx;
    }
    .right {
      flex: 1;
      margin-left: 25rpx;
      .title {
        height: 80rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #303133;
        line-height: 40rpx;
      }
      .percent {
        margin-top: 40rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #888888;
        text-align: right;
        &.blue {
          @include text-color();
        }
      }
      .u-progress {
        display: flex;
        margin-top: 5rpx;
      }
    }
  }
}
</style>
